<template>
	<view>
		详情页
		<!-- <view v-html="info.detailMobileHtml"></view> -->
		<view>
			<uni-icons type="star" 
			:color="selectedColor ? 'red' : ''"
			 size="30" @tap="collected"></uni-icons>
			<!-- 1. 点击按钮  需要在本地存储对应的商品 红色 向本地存储数组数据 -->
		</view>
		<button type="default" @tap="buyNow">立即购买</button>
		<mp-html :tag-style="style" :content="info.detailMobileHtml" />
		
		<view class="mask" v-if="isMaskShow" @touchmove.stop.prevent="">
			<button type="default" @tap="buy">
				确定
			</button>
		</view>
	</view>
</template>

<script>
	import {
		productDetail,
		addPreOrder
	} from "@/api/kind/list/info/index.js"
	import mix from "@/mixins/index.js"
	export default {
		data() {
			return {
				info:{},
				isMaskShow:false,
				selectedColor:false,
				style:{
				  img: 'width:90%;margin:0 auto;display:block;' // a 标签默认为红色
				}
			};
		},
		mixins:[mix],
		onLoad(options) {
			var id = options.id;
			var list = uni.getStorageSync("collected");
			
			
			if(list == null || list == ""){// 1. 如果本地没数据
				
				this.selectedColor = false
			}else{ // 2. 本地有相同的商品
				var index = list.findIndex(ele =>ele.id == id);
				
				// 2 本地有数据
				// 2.1 如果本地有相同的商品  点击执行取消收藏操作
				if(index != -1){
					
					this.selectedColor = true;
				}else{
					// 2.2  如果本地没有相同的商品 点击执行添加操作
					
					this.selectedColor = false;
				}
			}
			productDetail(id)
			.then(res =>{
				console.log(res);
				this.info = res.data.product
				uni.setNavigationBarTitle({
					title:res.data.product.name
				})
			})
		},
		methods:{
			buy(){
				var obj = {
				 "orderItemList": [
					{
					  "productId": this.info.id,
					  "productQuantity": 3,
					  "productSkuId":  this.info.skuList[0].id
					}
				  ]
				}
				// 没有登录 不能调取接口
				if(this.checkLogins()){
					addPreOrder(obj)
					.then(res =>{
						console.log(res);
						// 
						uni.navigateTo({
							url:`../../order/order?id=${res.data.orderId}`
						})
					})
				}
				
				
			},
			buyNow(){
				this.isMaskShow = true;
			},
			collected(){
				// 1. 点击按钮  需要在本地存储对应的商品 红色 向本地存储数组数据
				// 第一次存储
				var list = uni.getStorageSync("collected");
				console.log(list);
				// 本地没有数据
				if(list == null || list == ""){
					uni.setStorageSync("collected",[this.info]);
					this.selectedColor = true
				}else{
					
					var index = list.findIndex(ele =>ele.id == this.info.id);
					
					// 2 本地有数据
					// 2.1 如果本地有相同的商品  点击执行取消收藏操作
					if(index != -1){
						list.splice(index,1);
						this.selectedColor = false;
					}else{
						// 2.2  如果本地没有相同的商品 点击执行添加操作
						list.push(this.info);
						this.selectedColor = true;
					}
					uni.setStorageSync("collected",list)
					
				}
				// if(list){
					
				// }
				// uni.setStorageSync("collected",[this.info])
			}
		}
	}
</script>

<style lang="scss" scoped>
// .img{
// 	width: 100%;
// }
.mask{
	position: fixed;
	top: 0;
	left:0;
	width: 100%;
	height: 100vh;
	z-index: 999;
	background: rgba(0,0,0,0.6);
}
</style>
